<template>
  <el-dialog :title="formCustomer.id ? '编辑客户' : '新增客户'" :visible="dialogVisible" width="60%" @close="closeFn">
    <el-form ref="form" label-width="80px" :model="formCustomer" :rules="rules">
      <el-form-item label="经纪" prop="agent">
        <el-select v-model="formCustomer.agent" placeholder="请选择">
          <el-option v-for="item in agents.data" :key="item.value" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formCustomer.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formCustomer.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formCustomer.phone" />
      </el-form-item>
      <el-form-item label="微信" prop="wechat">
        <el-input v-model="formCustomer.wechat" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formCustomer.desc" />
      </el-form-item>
      <el-form-item label="封面">
        <!-- <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
        >
          <i class="el-icon-plus" />
        </el-upload> -->
        <Upload ref="staffPhoto" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="addCli">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addClient, getAgents, editClients } from '@/api/user'
import Upload from '@/components/Upload/index.vue'
export default {
  components: {
    Upload
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formCustomer: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      name: '',
      // 表单验证规则
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '名字不能为空' },
          { min: 2, max: 4, trigger: 'blur', message: '姓名长度为2-4个字符串' }
        ],
        email: [
          { required: true, trigger: 'blur', message: '邮箱不能为空' },
          {
            pattern: /[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/,
            trigger: 'blur',
            message: '邮箱格式不正确'
          }
        ],
        phone: [
          { required: true, trigger: 'blur', message: '手机号码不能为空' },
          { pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '手机号码格式不正确' }
        ],
        wechat: [
          { required: true, trigger: 'blur', message: '微信不能为空' },
          { min: 6, max: 11, trigger: 'blur', message: '微信长度为6-11位' }
        ],
        desc: [
          { required: true, trigger: 'blur', message: '描述不能为空' },
          { min: 6, max: 100, trigger: 'blur', message: '描述长度是6-100' }
        ]
      },
      // 获取经纪列表
      agents: []
    }
  },
  // 获取经纪列表
  created() {
    this.getAgents()
  },
  methods: {
    // 封装获取经纪列表
    async getAgents() {
      this.agents = await getAgents()
    },
    // 新增客户 / 编辑客户
    async addCli() {
      // 表单验证
      this.$refs.form.validate()
      // 获取图像的路径
      const obj = this.$refs.staffPhoto.fileList[0]
      this.formCustomer.image = obj && obj.url

      // 如果存在 id 就执行编辑模块
      if (this.formCustomer.id) {
        // 编辑接口
        await editClients(this.formCustomer)
      } else {
        // 没有 id 就执行新增模块
        // 调用新增接口
        await addClient(this.formCustomer)
      }
      // 刷新
      this.$emit('updateCustomer')
      // 关闭弹框
      this.closeFn()
    },
    // 关闭弹窗
    closeFn() {
      // 修改 从父组件传入的数据 -- 同时在父组件传入参数的位置加上 sync -- 重点
      this.$emit('update:dialogVisible', false)
      // 表单重置
      this.$refs.form.resetFields()
      // 关闭弹窗，清空数据
      this.formCustomer = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      // 因为是获取的是Upload组件上fileList，所以要清空的是fileList的数组
      this.$refs.staffPhoto.fileList = []
    },
    // 回显头像
    fn(str) {
      this.$refs.staffPhoto.fileList.push({ url: str })
    }
  }
}
</script>

<style></style>
